<script setup>
import { ref, reactive, inject, toRaw, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

//引入API
// import { findAllEmps } from '../../api/emp.js'

onMounted(()=>{
    loadFormData();
});

const activeTabName = ref('info');
function doClickTab(tabObj, event) {//切换标签,暂未使用
    //console.log('doClickTab:', tabObj, event);
}

const dataLoading = ref(false);
const loginUser = ref();//登录者信息
function loadFormData() {//获取表单数据对象模板
    dataLoading.value = true;
    
    //TODO: 从服务端获取登录者的信息
    let data = {id:1,loginName:'tom1',no:'000001',name:'汤姆1汤姆1',idCard:'999999999999999999',sex:1,phone:'12345678901',addr:'南京1\n南京1',marry:1,school:'XXX大学1',edu:'本科',hiredate:'2000-10-20',expirationTime:'2099-10-20',dept:{id:1,name:'开发部'},job:{id:1,name:'Java工程师'},status:2};
    
    //成功后执行以下操作
    loginUser.value = data;
    formData.value = structuredClone(data);//克隆
    dataLoading.value = false;
}
//表单数据 个人信息
const formData = ref({id:1,loginName:'tom1',no:'000001',name:'汤姆1汤姆1',idCard:'999999999999999999',sex:1,phone:'12345678901',addr:'南京1\n南京1',marry:1,school:'XXX大学1',edu:'本科',hiredate:'2000-10-20',expirationTime:'2099-10-20',dept:{id:1,name:'开发部'},job:{id:1,name:'Java工程师'},status:2});
const formRef = ref(null);//表单组件
//信息编辑
const formRules = reactive({//校验规则
    name: [{required:true, validator: (rule, value, callback)=>{
        if(!value) {
            callback(new Error('请填写名称'));
            return;
        }
        if(value.length > 20) {
            callback(new Error('名称长度范围是1~20'));
            return;
        }
        callback();
    }, trigger:'blur'}],
    phone: [{required:true, message:'请填写手机号', trigger:'blur'}],
    addr: [
        {required:true, message:'请填写所在位置', trigger:'blur'},
        {min:1, max:100, message:'内容长度是1~100', trigger:'blur'},
    ]
});
function doFormSubmit() {//表单校验与提交
    formRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('校验通过');
            //TODO: 提交信息修改
            let params = {name: formData.value.name, phone: formData.value.phone, addr: formData.value.addr};
            console.log('submit:', params);
            
            //成功后执行以下操作
            loginUser.value.name = params.name;
            loginUser.value.phone = params.phone;
            loginUser.value.addr = params.addr;
            ElMessage.success('修改成功');
        } else { 
            //console.log('校验不通过:', fields);
            ElMessage.warning('信息有误，请查看对应的提示信息');
        }
    });;
}
function doFormReset() {//表单重置
    formRef.value.resetFields();
}

//个人信息展示
//格式化数据
function getSex(val) {
    return val == 1 ? '男':'女';
}
function getMarry(val) {
    return val == 1 ? '未婚':'已婚';
}
const statusStrArr = [undefined,'试用','正式','离职','实习'];
function getStatus(val) {
    return statusStrArr[val]||'未知';
}

//密码修改
const pwdFormData = ref({oldPwd:'', pwd:'', repwd:''});
const pwdFormRef = ref(null);//表单组件
const pwdFormRules = reactive({//校验规则
    oldPwd:[{required:true, validator: (rule, value, callback)=>{
        if(!value) {
            callback(new Error('请填写旧密码'));
            return;
        }
        if(value.length > 20) {
            callback(new Error('密码长度范围是1~20'));
            return;
        }
        //TODO: 校验旧密码是否正确
        //失败执行
        //callback(new Error('旧密码输入错误'));

        //成功后执行以下操作
        callback();
    }, trigger:'blur'}],
    pwd:[{required:true, min:1, max:20, message:'新密码长度范围是1~20', trigger:'blur'}],
    repwd: [{required:true, validator: (rule, value, callback)=>{
        if(!value) {
            callback(new Error('请填写确认密码'));
            return;
        }
        if(value !== pwdFormData.value.pwd) {
            callback(new Error('新密码与确认密码不一致'));
            return;
        }
        callback();
    }, trigger:'blur'}],
});
function doPwdFormSubmit() {//表单校验与提交
    pwdFormRef.value.validate((valid, fields) => {
        if (valid) {
            console.log('校验通过');
            //TODO: 提交密码修改表单
            let params = toRaw(pwdFormData.value);
            console.log('submit:', params);

            //成功后执行以下操作
            ElMessage.success('修改成功');
            //执行自动退出,让用户手动登录
            doLogOut();
        } else { 
            console.log('校验不通过:', fields); 
            ElMessage.warning('信息有误，请查看对应的提示信息');
        }
    });
}
function doPwdFormReset() {//密码表单重置
    pwdFormRef.value.resetFields();
}

const appCurrentView = inject('appCurrentView');//app页面切换
function doLogOut() {//退出操作
    appCurrentView.name = 'Login';
    localStorage.removeItem('appCurrentView.name');
    localStorage.removeItem('mainCurrentView.name');
    localStorage.removeItem("login");
}

</script>
<template>
    <div class="dept-add-page-dl" >
        <div class="title-dl" >个人中心</div>

        <el-tabs v-model="activeTabName" @tab-click="doClickTab" v-loading="dataLoading"
        type="border-card" tab-position="top" >
            <el-tab-pane label="个人信息" name="info">
                <div class="info-dl">
                    <el-form :model="formData" label-width="130px" disabled >
                        <el-form-item label="工号：" prop="no">
                            <el-input v-model="formData.no" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="姓名：" prop="name">
                            <el-input v-model="formData.name" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="用户名：" prop="loginName">
                            <el-input v-model="formData.loginName" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="身份证号：" prop="idCard">
                            <el-input v-model="formData.idCard" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="性别：" prop="sex">
                            <el-input v-model="formData.sex" autocomplete="off" readonly :formatter="getSex" />
                        </el-form-item>
                        <el-form-item label="手机号：" prop="phone">
                            <el-input v-model="formData.phone" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="居住地：" prop="addr">
                            <el-input type="textarea" v-model="formData.addr" autocomplete="off" autosize readonly />
                        </el-form-item>
                        <el-form-item label="婚姻状况：" prop="marry">
                            <el-input v-model="formData.marry" autocomplete="off" readonly :formatter="getMarry" />
                        </el-form-item>
                        <el-form-item label="毕业学校：" prop="school">
                            <el-input v-model="formData.school" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="学历：" prop="edu">
                            <el-input v-model="formData.edu" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="入职日期：" prop="hiredate">
                            <el-input v-model="formData.hiredate" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="合同到期时间：" prop="expirationTime">
                            <el-input v-model="formData.expirationTime" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="部门：" prop="dept.id">
                            <el-input v-model="formData.dept.name" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="职位：" prop="job.id">
                            <el-input v-model="formData.job.name" autocomplete="off" readonly />
                        </el-form-item>
                        <el-form-item label="状态：" prop="status">
                            <el-input v-model="formData.status" autocomplete="off" readonly :formatter="getStatus" />
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="信息编辑" name="modify">
                <div class="info-modify-dl">
                    <el-form :model="formData" label-width="130px" :rules="formRules" 
                    status-icon ref="formRef">
                        <!-- 根据实际情况自行增加输入框等 -->
                        <el-form-item label="姓名：" prop="name">
                            <el-input v-model="formData.name" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="手机号：" prop="phone">
                            <el-input v-model="formData.phone" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="居住地：" prop="addr">
                            <el-input type="textarea" v-model="formData.addr" autocomplete="off" autosize />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="doFormSubmit">确定</el-button>
                            <el-button @click="doFormReset" >重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="密码修改" name="pwd">
                <div class="pwd-modify-dl">
                    <el-form :model="pwdFormData" label-width="130px" :rules="pwdFormRules" 
                    status-icon ref="pwdFormRef">
                        <el-form-item label="旧密码：" prop="oldPwd">
                            <el-input type="password" v-model="pwdFormData.oldPwd" autocomplete="off" show-password />
                        </el-form-item>
                        <el-form-item label="新密码：" prop="pwd">
                            <el-input type="password" v-model="pwdFormData.pwd" autocomplete="off" show-password />
                        </el-form-item>
                        <el-form-item label="确认密码：" prop="repwd">
                            <el-input type="password" v-model="pwdFormData.repwd" autocomplete="off" show-password />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="doPwdFormSubmit">确定</el-button>
                            <el-button @click="doPwdFormReset" >重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-tab-pane>
        </el-tabs>

        
    </div>
</template>
<style scoped>
.title-dl {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.info-dl {
    width: 600px;
}
.info-modify-dl {
    width: 600px;
}
.pwd-modify-dl {
    width: 600px;
}
</style>